<template>
	<div class="view">
		<div class="list-box">
			<div class="list" v-for="(item, index) in list" :key="index">
				<p class="title">{{item.diseaseName}}</p>
				<div class="box" v-for="(x, y) in item.groupInfoList" :key="y"
					@click="btnPath('/pages/CommunityPages/circleDetails/main?id=' + item.id)">
					<img class="icon" :src="x.iconUrl">
					<p class="name">{{x.groupName}}</p>
				</div>
			</div>
		</div>

		<div v-if="isEmpty" class="empty-text">还没有数据哦~</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				list: [],
				isEmpty: false,
				page: 1,
				total: 0
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getApiIndexData()
		},
		onReachBottom() {
			if (!this.total || this.list.length === this.total) return
			this.page++
			this.getApiIndexData()
		},
		methods: {
			// 请求主数据
			getApiIndexData() {
				let params = {
					pageNo: this.page,
					pageSize: 8,
					symptomId: this.id
				}
				this.$api.http(
					'/sms/smsBodyPartsInfo/api/n/getAllInfoBySymptomId',
					'GET',
					params,
					res => {
						this.total = res.data.result.total
						if (this.page === 1) this.list = []
						this.list = this.list.concat(res.data.result.records)
						if (this.list.length) {
							this.isEmpty = false
						} else {
							this.isEmpty = true
						}
					}
				)
			},
			// 路由 - 跳转
			btnPath(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.view {
		.list-box {
			.list {
				background-color: #FFF;

				&:not(:last-child) {
					border-bottom: 1px solid #E8E8E8;
				}

				.title {
					padding: 30rpx 0 0 30rpx;
					font-size: 26rpx;
				}

				.box {
					padding: 30rpx;
					width: 170rpx;
					text-align: center;

					.icon {
						width: 80rpx;
						height: 80rpx;
					}

					.name {
						margin-top: 10rpx;
						width: 110rpx;
						font-size: 24rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}

		.empty-text {
			padding: 20rpx;
			text-align: center;
			color: #AAA;
			font-size: 28rpx;
		}
	}
</style>